<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户分析</title>
  <style>
    /* 背景图片 */
    .container {
      background-image: url('/imag/back1.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .navi-background {
      position: absolute;
      top: 9px;
      /* transform: translate(-50%, -100%); */
      z-index: 99; /* 确保在背景之上 */
      width: 1263px;
      height: 50px;
      opacity: 0.8; /* 可选：调整透明度 */
}

    /* 导航栏文字样式 */
    .navi {
      display: flex;
      text-align: center;
      justify-content: center;
      z-index: 100;
      font-size: 25px;
      /* 深色科技感艺术字 */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      margin-bottom: 30px;
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      color: rgb(117, 213, 224);
      font-weight: bold; /* 增加字体粗细 */
    }
    
    /* 用户搜索关键词容器 */
    .bar-chart-container {
      position: absolute;
      left: 29%;
      top: 10%;
      width: 500px;
      height: 150px;
      display: flex;
      border: 1px solid rgba(173, 216, 230, 0.3);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(173, 216, 230, 0.2);
      background: rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    /* 柱状图 */
    .bar-chart {
      position: absolute;
      top: 20%;
      display: flex;
      align-items: flex-end;
      height: 70%;
      width: 100%;
      gap: 15px;
      padding: 0 10px;
      justify-content: center;
    }

    /* 柱子 */
    .bar {
      background: linear-gradient(to top, #4ecdc4, #1E90FF);
      border-radius: 3px 3px 0 0;
      position: relative;
      min-width: 40px;
      box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
      animation: barGrow 1s ease-out forwards;
      transform-origin: bottom;
      transform: scaleY(0);
    }

    /* 柱子动画 */
    @keyframes barGrow {
      to {
        transform: scaleY(1);
      }
    }

    /* 柱子标签 */
    .bar-label {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8px;
      color: rgb(117, 213, 224);
      white-space: nowrap;
    }

    /* Y轴标签 */
    .y-axis {
      position: absolute;
      left: 120px;
      top: 3%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 6px;
      color: rgb(117, 213, 224);
    }

    .y-axis-label {
      transform: translateY(50%);
    }
    
    .wordcloud-title {
      font-size: 15px;
      color: rgb(117, 213, 224);
      text-align: center;
      margin-bottom: 10px;
    }

    /* 词云容器 */
    .wordcloud-container {
      position: absolute;
      right: 1%;
      top: 10%;
      width: 300px;
      height: 150px;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(173, 216, 230, 0.3);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(173, 216, 230, 0.2);
      background: rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    /* 词云项 */
    .word-item {
      position: absolute;
      font-weight: bold;
      opacity: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    .word-item:hover {
      transform: scale(1.1);
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* 不同大小的词 */
    .size-1 { font-size: 6px; }
    .size-2 { font-size: 8px; }
    .size-3 { font-size: 10px; }
    .size-4 { font-size: 12px; }
    .size-5 { font-size: 14px; }
    
    
    
    /* 科技感颜色 */
    .color-1 { color: #00FFFF; } /* 青色 */
    .color-2 { color: #00BFFF; } /* 深天蓝 */
    .color-3 { color: #1E90FF; } /* 道奇蓝 */
    .color-4 { color: #87CEFA; } /* 淡蓝 */
    .color-5 { color: #4169E1; } /* 皇家蓝 */
    .color-6 { color: #61b0d2; } /* 纯蓝 */
    .color-7 { color: #7343ad; } /* 中蓝 */
    .color-8 { color: #9244c9; } /* 靛蓝 */
    
    /* 动画关键帧 */
    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
    
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0px);
      }
    }


    /* 销量分布容器 */
    .sale-distribution { 
      position: absolute;
      right: 1%;
      top: 40%;
      width: 300px;
      height: 180px;
      display: flex;
      border: 1px solid rgba(173, 216, 230, 0.3);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(173, 216, 230, 0.2);
      background: rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    /* 图表容器 */
    .chart-container {
      position: relative;
      top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      width: 45%;
    }
    
    /* 饼图容器 */
    .pie-chart-container {
      position: relative;
      top: 0;
      width: 90px;
      height: 90px;
      margin-top: 10px;
    }
    
    /* 饼图样式 */
    .pie-chart {
      width: 100%;
      height: 100%;
      border-radius: 50%; 
      position: relative; 
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      animation: pieRotate 2s ease-out; 
    }
    
    /* 销售分布饼图 */
    .occupation-chart {
      background: conic-gradient(
        #ff6b6b 0deg 100.8deg,
        #4ecdc4 100.8deg 180deg,
        #45b7d1 180deg 244.8deg,    
        #f9ca24 244.8deg 316.8deg,
        #6c5ce7 316.8deg 360deg 
      );
    }
    
    
    /* 图例容器 */
    .legend {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-bottom: 10px;
      gap: 5px;
      flex-wrap: wrap; 
      justify-content: center;
    }
    
    /* 图例项 */
    .legend-item {
      display: flex;
      align-items: center;
      font-weight: bold;
      /* 设置字体大小 */
      font-size: 8px;
      color: rgb(117, 213, 224);
    }
    
    /* 图例颜色标识 */
    .legend-color {
      width: 5px;
      height: 5px;
      margin-right: 10px;
      border-radius: 3px;
    }
    
    /* 职业分布颜色 */
    .occupation-1 { background-color: #ff6b6b; }
    .occupation-2 { background-color: #4ecdc4; }
    .occupation-3 { background-color: #45b7d1; }
    .occupation-4 { background-color: #f9ca24; }
    .occupation-5 { background-color: #6c5ce7; }
    
    
    /* 旋转动画 */
    @keyframes pieRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    /* 图表标题 */
    .chart-title {
      margin-top: 4px;
      font-size: 10px;
      font-weight: bold;
      /* margin-bottom: 25px; */
      color: rgb(117, 213, 224);
    }
    
    /* 图表行容器 */
    .charts-row {
      display: flex;
      justify-content: space-around;
      width: 100%;
      align-items: flex-start; /* 顶部对齐 */
      padding: 0 10px; /* 添加左右内边距 */
      box-sizing: border-box;
    }


    /* 增长量容器 */
    .growth {
      position: absolute;
      left: 29%;
      top: 40%;
      width: 500px;
      height: 180px;
      display: flex;
      border: 1px solid rgba(173, 216, 230, 0.3);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(173, 216, 230, 0.2);
      background: rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    /* 折线图容器 */
    .line-chart-container {
      position: absolute;
      top: 20%;
      width: 100%;
      height: 100%;
    }

    /* 折线图 */
    .line-chart {
      width: 100%;
      height: 140px;
      position: relative;
      margin-top: 10px;
    }

    /* Y轴标签 */
    .line-chart .y-axis {
      position: absolute;
      left: 0;
      top: 0;
      height: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 6px;
      color: rgb(117, 213, 224);
      width: 20px;
    }

    /* X轴标签 */
    .line-chart .x-axis {
      position: absolute;
      bottom: 0;
      left: 100px;
      width: calc(60% - 25px);
      display: flex;
      font-size: 8px;
      color: rgb(4, 72, 80);
      padding: 0;
      margin: 0;
    }

    /* X轴单项标签 */
    .line-chart .x-axis-label {
      position: absolute;
      transform: translateX(-50%);
    }

    /* 折线图SVG */
    .line-graph {
      position: absolute;
      top: 0;
      width: calc(100%  - 25px);
      height: 100%;
    }

    /* 数据点动画 */
    .data-point {
      animation: pointAppear 1s ease-out forwards;
      opacity: 0;
    }

    /* 图例容器 - 用于乡村振兴增长趋势 */
    .growth-legend {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      z-index: 10;
    }

    /* 图例项 */
    .growth-legend-item {
      display: flex;
      align-items: center;
      font-size: 6px;
      color: rgb(117, 213, 224);
    }

    /* 图例颜色标识 */
    .growth-legend-color {
      width: 8px;
      height: 2px;
      margin-right: 5px;
    }

    .data-point:nth-child(2) { animation-delay: 0.2s; }
    .data-point:nth-child(3) { animation-delay: 0.4s; }
    .data-point:nth-child(4) { animation-delay: 0.6s; }
    .data-point:nth-child(5) { animation-delay: 0.8s; }
    .data-point:nth-child(6) { animation-delay: 1.0s; }

    @keyframes pointAppear {
      from { opacity: 0; r: 0; }
      to { opacity: 1; r: 4; }
    }

    /* 折线动画 */
    .line-path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: drawLine 2s ease-out forwards;
      animation-delay: 1.2s;
    }

    @keyframes drawLine {
      to {
        stroke-dashoffset: 0;
      }
    }

    /* 阴影区域动画 */
    .area-shadow {
      opacity: 0;
      animation: fadeInShadow 1s ease-out forwards;
      animation-delay: 2s;
    }

    @keyframes fadeInShadow {
      to {
        opacity: 0.3;
      }
    }


    /* 用户参与度容器 */
    .average_time {
      position: absolute;
      left: 1%;
      top: 40%;
      width: 305px;
      height: 180px;
      display: flex;
      border: 1px solid rgba(173, 216, 230, 0.3);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(173, 216, 230, 0.2);
      background: rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    /* 柱状图容器 - 使用时长 */
    .bar-chart-container-time {
      margin-top: 20px;
      width: 90%;
      height: 100%;
      position: absolute;
    }

    /* 柱状图 - 使用时长 */
    .bar-chart-time {
      width: 100%;
      height: 140px;
      position: relative;
      margin-top: 10px;
    }

    /* Y轴标签 - 使用时长 */
    .bar-chart-time .y-axis-time {
      position: absolute;
      left: 0;
      top: 0;
      height: 95%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 6px;
      color: rgb(117, 213, 224);
      width: 20px;
    }

    /* X轴标签 - 使用时长 */
    .bar-chart-time .x-axis-time {
      position: absolute;
      bottom: 0px;
      left: 35px;
      right: 0px;
      display: flex;
      justify-content: space-around;
      font-size: 5px;
      color: rgb(117, 213, 224);
    }

    /* X轴标签样式 - 使用时长 */
    .x-axis-label-time {
      /* bottom: -100px;  */
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 5px;
    }

    /* 柱子容器 */
    .bars-container {
      position: absolute;
      top: 0;
      left: 25px;
      right: 0;
      bottom: 8px;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
    }

    /* 柱子 - 使用时长 */
    .bar-time {
      width: calc(60% / 10);
      background: linear-gradient(to top, #a29bfe, #1E90FF);
      border-radius: 3px 3px 0 0;
      position: relative;
      min-width: 20px;
      box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
      animation: barGrow 1s ease-out forwards;
      transform-origin: bottom;
      transform: scaleY(0);
    }

    

    /* 用户满意度圆形进度 */

    /* 进度图整体容器 */
    .satisfy {
      position: absolute;
      left: 1%;
      top: 10%;
      width: 305px;
      height: 150px;
      display: flex;
      border: 1px solid rgba(173, 216, 230, 0.3);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(173, 216, 230, 0.2);
      background: rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    .icon img { 
      height: 25px;
      width: 25px;
      margin-right: 20px;
    }
    /* 进度图容器 */
    .progress-container { 
      position: absolute;
      left: 1%;
      top: 35%;
      display: flex;
      justify-content: space-around;
      width: 320px;
      height: 300px;
    }

    /* 单个进度项 */
    .progress-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 6px;
      color: rgb(117, 213, 224);
    }

    .progress-label {
      margin-top: 5px;
      font-size: 10px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    /* 圆形进度条容器 */
    .progress-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        #1E90FF 0deg,
        #4ecdc4 calc(var(--percent) * 3.6deg),
        transparent calc(var(--percent) * 3.6deg)
      );
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
      animation: fadeIn 1s ease-out forwards;
    }

    /* 内部白色圆圈（形成环形） */
    .progress-circle::before {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1;
    }

    /* 文字显示在最上层 */
    .progress-text {
      position: relative;
      z-index: 2;
      font-size: 8px;
      font-weight: bold;
      color: white;
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    }

      @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  </style>
</head>
<body>
  <div class="container">
    <!-- 导航栏 -->
    <span class="navi">用户分析</span>
    <img src="imag/navi1.png" alt="叠加背景" class="navi-background">

    <!-- 用户满意度 -->
    <div class="satisfy"> 
        <div class="icon">
          <img src="imag/Snipaste.png">
        </div>
        <div class="chart-title">
              减碳减排指标
          </div >
      <div class="progress-container">
            <div class="progress-item">
            <p class="progress-label">减排完成率</p>
            <div class="progress-circle" style="--percent: 78;">
              <span class="progress-text">78%</span>
            </div>
       
        </div>
       
        </div>
    </div>

    <!-- 游客来源分析 -->
    <div class="bar-chart-container">
      <div class="icon">
        <img src="imag/Snipaste.png">
      </div>
      <div class="chart-title">游客来源分析</div>
      <div class="bar-chart">
        <div class="y-axis">
          <div class="y-axis-label">1400</div>
          <div class="y-axis-label">1050</div>
          <div class="y-axis-label">700</div>
          <div class="y-axis-label">350</div>
          <div class="y-axis-label">0</div>
        </div>
        <div class="bar" style="height: 89.3%; animation-delay: 0.1s;">
          <div class="bar-label">福州市内</div>
        </div>
        <div class="bar" style="height: 63.6%; animation-delay: 0.2s;">
          <div class="bar-label">厦门市</div>
        </div>
        <div class="bar" style="height: 46.4%; animation-delay: 0.3s;">
          <div class="bar-label">泉州市</div>
        </div>
        <div class="bar" style="height: 30%; animation-delay: 0.4s;">
          <div class="bar-label">漳州市</div>
        </div>
        <div class="bar" style="height: 27.1%; animation-delay: 0.5s;">
          <div class="bar-label">其他地区</div>
        </div>
      </div>
    </div>

    <!-- 用户参与度 -->
    <div class="average_time">
      <div class="icon">
        <img src="imag/Snipaste.png">
      </div>
      <div class="chart-title">
        用户参与度
      </div>
      <div class="bar-chart-container-time">
        <div class="bar-chart-time">
          <div class="y-axis-time">
            <div class="y-axis-label">2500</div>
            <div class="y-axis-label">1875</div>
            <div class="y-axis-label">1250</div>
            <div class="y-axis-label">625</div>
            <div class="y-axis-label">0</div>
          </div>
          <div class="bars-container">
            <div class="bar-time" style="height: 98%; animation-delay: 0.1s;">
              <div class="bar-label">浏览</div>
            </div>
            <div class="bar-time" style="height: 48.98%; animation-delay: 0.2s;">
              <div class="bar-label">预约</div>
            </div>
            <div class="bar-time" style="height: 34.69%; animation-delay: 0.3s;">
              <div class="bar-label">购买</div>
            </div>
            <div class="bar-time" style="height: 25.31%; animation-delay: 0.4s;">
              <div class="bar-label">评价</div>
            </div>
            <div class="bar-time" style="height: 15.51%; animation-delay: 0.5s;">
              <div class="bar-label">分享</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 乡村振兴增长趋势 -->
    <div class="growth">
      <div class="icon">
        <img src="imag/Snipaste.png">
      </div>
      <div class="chart-title">
        乡村振兴增长趋势
      </div>
      <!-- 添加图例 -->
      <div class="growth-legend">
        <div class="growth-legend-item">
          <div class="growth-legend-color" style="background-color: #4ecdc4;"></div>
          <span>旅游收入增长</span>
        </div>
        <div class="growth-legend-item">
          <div class="growth-legend-color" style="background-color: #1E90FF;"></div>
          <span>村民收入增长</span>
        </div>
      </div>
      <div class="line-chart-container">
        <div class="line-chart">
          <div class="y-axis">
            <div class="y-axis-label">600</div>
            <div class="y-axis-label">450</div>
            <div class="y-axis-label">300</div>
            <div class="y-axis-label">150</div>
            <div class="y-axis-label">0</div>
          </div>
          <div class="x-axis">
            <div class="x-axis-label" style="left: 0%;">2021</div>
            <div class="x-axis-label" style="left: 25%;">2022</div>
            <div class="x-axis-label" style="left: 50%;">2023</div>
            <div class="x-axis-label" style="left: 75%;">2024</div>
            <div class="x-axis-label" style="left: 100%;">2025</div>
          </div>
          <!-- 阴影区域和折线 -->
          <svg class="line-graph" viewBox="0 0 300 150">
            <!-- 旅游收入阴影区域 -->
            <path 
              fill="url(#tourismShadowGradient)" 
              stroke="none"
              opacity="0.3"
              d="M0,120 L75,90 L150,55 L225,10 L300,20 L300,150 L0,150 Z"
              class="area-shadow">
            </path>
            <!-- 村民收入阴影区域 -->
            <path 
              fill="url(#villagerShadowGradient)" 
              stroke="none"
              opacity="0.3"
              d="M0,125 L75,102.5 L150,70 L225,15 L300,25 L300,150 L0,150 Z"
              class="area-shadow">
            </path>
            <!-- 旅游收入折线 -->
            <polyline 
              fill="none" 
              stroke="#4ecdc4" 
              stroke-width="2"
              points="0,120 75,90 150,55 225,10 300,20"
              class="line-path">
            </polyline>
            <!-- 村民收入折线 -->
            <polyline 
              fill="none" 
              stroke="#1E90FF" 
              stroke-width="2"
              points="0,125 75,102.5 150,70 225,15 300,25"
              class="line-path">
            </polyline>
            <!-- 旅游收入数据点 -->
            <circle cx="0" cy="120" r="4" fill="#4ecdc4" class="data-point"></circle>
            <circle cx="75" cy="90" r="4" fill="#4ecdc4" class="data-point"></circle>
            <circle cx="150" cy="55" r="4" fill="#4ecdc4" class="data-point"></circle>
            <circle cx="225" cy="10" r="4" fill="#4ecdc4" class="data-point"></circle>
            <circle cx="300" cy="20" r="4" fill="#4ecdc4" class="data-point"></circle>
            <!-- 村民收入数据点 -->
            <circle cx="0" cy="125" r="4" fill="#1E90FF" class="data-point"></circle>
            <circle cx="75" cy="102.5" r="4" fill="#1E90FF" class="data-point"></circle>
            <circle cx="150" cy="70" r="4" fill="#1E90FF" class="data-point"></circle>
            <circle cx="225" cy="15" r="4" fill="#1E90FF" class="data-point"></circle>
            <circle cx="300" cy="25" r="4" fill="#1E90FF" class="data-point"></circle>
            <!-- 渐变定义 -->
            <defs>
              <linearGradient id="tourismShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#4ecdc4" stop-opacity="0.4"/>
                <stop offset="100%" stop-color="#4ecdc4" stop-opacity="0.1"/>
              </linearGradient>
              <linearGradient id="villagerShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#1E90FF" stop-opacity="0.4"/>
                <stop offset="100%" stop-color="#1E90FF" stop-opacity="0.1"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    </div>

    <!-- 词云容器 -->
    <div class="wordcloud-container" id="wordCloud">
      <div class="icon">
        <img src="imag/Snipaste.png">
        </div>
        <div class="wordcloud-title">
          访问较多功能
        </div>
      <div style="position: relative; z-index: 1;"></div>
      <!-- 词云项将通过JavaScript动态生成 -->
    </div>

    <!-- 销售占比饼图分布 -->
    <div class="sale-distribution">
      <div class="icon">
        <img src="imag/Snipaste.png">
        </div>
        <div class="chart-title">
          特色产品销售占比
        </div>
      <div class="charts-row">
        <!-- 销售分布饼图 -->
        <div class="chart-container">
          <div class="legend">
            <div class="legend-item">
              <div class="legend-color occupation-1"></div>
              <span>盖洋红青红酒 (28%)</span>
            </div>
            <div class="legend-item">
              <div class="legend-color occupation-2"></div>
              <span>高山优质米 (22%)</span>
            </div>
            <div class="legend-item">
              <div class="legend-color occupation-3"></div>
              <span>赤松茸 (18%)</span>
            </div>
            <div class="legend-item">
              <div class="legend-color occupation-4"></div>
              <span>文创餐饮 (20%)</span>
            </div>
            <div class="legend-item">
              <div class="legend-color occupation-5"></div>
              <span>稻壳文创产品 (12%)</span>
            </div>
          </div>
          <div class="pie-chart-container">
            <div class="pie-chart occupation-chart"></div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <script>
    // 词云数据 - 根据权重值分配大小和颜色
    const words = [
      { text: "乡村振兴", size: 5, color: 1, weight: 100 },
      { text: "非遗文化", size: 5, color: 2, weight: 90 },
      { text: "低碳生活", size: 5, color: 3, weight: 85 },
      { text: "传统村落", size: 4, color: 4, weight: 80 },
      { text: "青红酒", size: 4, color: 5, weight: 75 },
      { text: "梯田景观", size: 4, color: 6, weight: 70 },
      { text: "星空观测", size: 3, color: 7, weight: 65 },
      { text: "庄寨文化", size: 3, color: 8, weight: 60 },
      { text: "农耕体验", size: 3, color: 1, weight: 55 },
      { text: "稻壳工艺", size: 3, color: 2, weight: 50 },
      { text: "古法酿造", size: 2, color: 3, weight: 45 },
      { text: "生态农业", size: 2, color: 4, weight: 40 },
      { text: "文化传承", size: 2, color: 5, weight: 35 },
      { text: "乡村旅游", size: 2, color: 6, weight: 30 },
      { text: "可持续发展", size: 1, color: 7, weight: 25 }
    ];
    
    // 词云位置配置 - 增加更多位置
    const positions = [
      { top: "15%", left: "15%" },
      { top: "25%", left: "70%" },
      { top: "35%", left: "25%" },
      { top: "45%", left: "65%" },
      { top: "55%", left: "10%" },
      { top: "65%", left: "80%" },
      { top: "75%", left: "30%" },
      { top: "20%", left: "50%" },
      { top: "30%", left: "10%" },
      { top: "40%", left: "85%" },
      { top: "50%", left: "40%" },
      { top: "60%", left: "20%" },
      { top: "70%", left: "75%" },
      { top: "15%", left: "80%" },
      { top: "80%", left: "50%" }
    ];
    
    // 初始化词云
    function initWordCloud() {
      const container = document.getElementById('wordCloud');
      container.innerHTML = '';
      
      words.forEach((word, index) => {
        const wordItem = document.createElement('div');
        wordItem.className = `word-item size-${word.size} color-${word.color}`;
        wordItem.textContent = word.text;
        wordItem.style.top = positions[index].top;
        wordItem.style.left = positions[index].left;
        
        container.appendChild(wordItem);
        
        // 延迟添加动画
        setTimeout(() => {
          wordItem.style.animation = `fadeIn 1s ease forwards, float 3s ease-in-out infinite`;
          wordItem.style.animationDelay = `${index * 0.2}s`;
        }, 100);
      });
    }
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initWordCloud();
    });
  </script>

</body>
</html>